<template>
  <div>
    <van-nav-bar
        title="错题本"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <view class="container">
      <van-cell-group>
        <van-list
            v-model:loading="loading"
            :finished="finished"
            @load="onLoad"
        >
          <van-cell  v-for="n in items" :title="n.questionContent" :value="n.attemptTime" />
        </van-list>
      </van-cell-group>
    </view>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {showToast} from "vant";
import {get} from "../../util/request.js"
const items=ref([]);
const onClickLeft = () => history.back();
const finished = ref(false);
const loading = ref(false);
const onLoad = () => {
  get('home/getErrorQuestions').then( r=>{
    if (r.code == 0){ // 获取成功
      loading.value = true;
      // alert("查询成功")
      items.value= r.data;
      finished.value = true;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });
}

</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.ellipsis-content {
  display: -webkit-box; /* 对Webkit内核生效 */
  -webkit-line-clamp: 1; /* 行数 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  max-width: 10em; /* 或根据实际需要设置宽度 */
}
</style>